<template>
  <div class="dashboard">
    <!-- 标题区 -->
    <div class="dashboard-header">
      <span class="title"
        >客户数据看板
        <span class="subtitle">最新统计：{{ formattedDate }}</span>
      </span>

      <span>
        <!-- 单选button按钮 当日 本周 本月 -->
        <el-radio-group v-model="radio" @change="handleChange">
          <el-radio-button label="1">当日</el-radio-button>
          <el-radio-button label="2">本周</el-radio-button>
          <el-radio-button label="3">本月</el-radio-button>
        </el-radio-group>
      </span>
    </div>

    <!-- 数据卡片网格 -->
    <div class="card-grid">
      <!-- 🔥 高亮卡片：客户总数（占 2 格） -->
      <div class="card card--primary card-highlight" style="grid-column: span 2">
        <div class="card-decoration"></div>
        <div class="card-body">
          <div class="card-title">客户总数</div>
          <div class="card-value">12,847</div>
          <div class="card-footer">
            <span class="change" style="color: #4caf50">↑ 89</span>
            <span class="unit">人（今日新增）</span>
          </div>
        </div>
        <div class="card-icon">
          <i class="fas fa-users"></i>
        </div>
      </div>

      <!-- 🔥 高亮卡片：当日业绩（占 2 格） -->
      <div class="card card--success card-highlight" style="grid-column: span 2">
        <div class="card-decoration"></div>
        <div class="card-body">
          <div class="card-title">当日业绩</div>
          <div class="card-value">¥86,400</div>
          <div class="card-footer">
            <span class="change" style="color: #4caf50">↑ 12.3%</span>
            <span class="unit">较昨日</span>
          </div>
        </div>
        <div class="card-icon">
          <i class="fas fa-chart-line"></i>
        </div>
      </div>
      <div
        v-for="(item, index) in dashboardData"
        :key="index"
        class="card"
        :class="`card--${item.type}`"
        @mouseenter="onHover(index)"
        @mouseleave="onLeave"
      >
        <!-- 动态装饰条 -->
        <div class="card-decoration"></div>

        <!-- 内容 -->
        <div class="card-body">
          <div class="card-title">{{ item.title }}</div>
          <div class="card-value">{{ item.value }}</div>
          <div class="card-footer">
            <span class="change" :style="{ color: getChangeColor(item.change) }">
              {{ item.change > 0 ? '↑' : item.change < 0 ? '↓' : '→' }}
              {{ Math.abs(item.change) }}
            </span>
            <span class="unit">{{ item.unit }}</span>
          </div>
        </div>

        <!-- 图标 -->
        <div class="card-icon">
          <i :class="item.icon"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface DashboardItem {
  title: string;
  value: string | number;
  change: number; // 正数为增长，负数为下降
  unit: string;
  icon: string;
  type: 'primary' | 'success' | 'warning' | 'danger' | 'info';
}

const hoveredIndex = ref<number | null>(null);
const radio = ref('1');

// 处理单选按钮变化
const handleChange = (val: string) => {
  radio.value = val;
  // 这里可以添加根据选择的时间范围更新数据的逻辑
};

// 获取当前日期（格式化）
const now = new Date();
const formattedDate = `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(
  2,
  '0'
)}月${String(now.getDate()).padStart(2, '0')}日`;

// 完整数据列表
// 数据:
// 1. 复购发货数量
// 2. 复购订单总量
// 3. 发货待通知数量
// 4. 当月客服备注量
// 5. 当月平台订单
// 6. 当月平台金额
// 7. 当月平台总退货量
// 8. 当月平台总退货金额
// 9. 当月平台退货退款订单
// 10. 当月平台退货退款金额
// 11. 当月平台拒收退款订单
// 12. 当月平台拒收退款金额
// 13. 当月平台急速退款订单
// 14. 当月平台急速退款金额
// 15. 投诉待跟进已完成
// 16. 当月退货待处理已完成
const dashboardData = ref<DashboardItem[]>([
  {
    title: '复购发货数量',
    value: 152,
    change: 12,
    unit: '单',
    icon: 'fas fa-truck',
    type: 'primary'
  },
  {
    title: '复购订单总量',
    value: 152,
    change: 8,
    unit: '笔',
    icon: 'fas fa-repeat',
    type: 'info'
  },
  {
    title: '发货待通知数量',
    value: 36,
    change: -2,
    unit: '条',
    icon: 'fas fa-bell',
    type: 'warning'
  },
  {
    title: '当月客服备注量',
    value: 847,
    change: 23,
    unit: '条',
    icon: 'fas fa-sticky-note',
    type: 'success'
  },
  {
    title: '当月平台订单',
    value: 500,
    change: 50,
    unit: '笔',
    icon: 'fas fa-shopping-cart',
    type: 'primary'
  },
  {
    title: '当月平台金额',
    value: '¥10万',
    change: 1.5,
    unit: '',
    icon: 'fas fa-yen-sign',
    type: 'success'
  },
  {
    title: '当月平台总退货量',
    value: 20,
    change: -2,
    unit: '件',
    icon: 'fas fa-undo',
    type: 'danger'
  },
  {
    title: '当月平台总退货金额',
    value: '¥2万',
    change: -0.5,
    unit: '',
    icon: 'fas fa-yen-sign',
    type: 'warning'
  },
  {
    title: '当月平台退货退款订单',
    value: 15,
    change: 3,
    unit: '笔',
    icon: 'fas fa-reply',
    type: 'info'
  },
  {
    title: '当月平台退货退款金额',
    value: '¥1.5万',
    change: 0.3,
    unit: '',
    icon: 'fas fa-yen-sign',
    type: 'primary'
  },
  {
    title: '当月平台拒收退款订单',
    value: 5,
    change: -1,
    unit: '笔',
    icon: 'fas fa-times-circle',
    type: 'danger'
  },
  {
    title: '当月平台拒收退款金额',
    value: '¥0.5万',
    change: -0.1,
    unit: '',
    icon: 'fas fa-yen-sign',
    type: 'warning'
  },
  {
    title: '当月平台急速退款订单',
    value: 10,
    change: 2,
    unit: '笔',
    icon: 'fas fa-fast-forward',
    type: 'success'
  },
  {
    title: '当月平台急速退款金额',
    value: '¥1万',
    change: 0.2,
    unit: '',
    icon: 'fas fa-yen-sign',
    type: 'primary'
  },
  {
    title: '投诉待跟进已完成',
    value: 90,
    change: 10,
    unit: '件',
    icon: 'fas fa-comment-dots',
    type: 'info'
  },
  {
    title: '当月退货待处理已完成',
    value: 30,
    change: 5,
    unit: '件',
    icon: 'fas fa-check-circle',
    type: 'success'
  }
]);

// 悬停效果
const onHover = (index: number) => {
  hoveredIndex.value = index;
};

const onLeave = () => {
  hoveredIndex.value = null;
};

// 根据变化值返回颜色
const getChangeColor = (change: number): string => {
  if (change > 0) return '#4caf50';
  if (change < 0) return '#f44336';
  return '#9e9e9e';
};
</script>

<style lang="scss" scoped>
.dashboard {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 标题区域 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
  }

  .subtitle {
    font-size: 13px;
    color: #666;
  }
}

/* 卡片网格（保持 4 列） */
.card-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 高亮卡片：更大内边距 + 更大字号 */
.card-highlight {
  padding: 28px 20px;
}

.card-highlight .card-value {
  font-size: 32px; /* 比普通卡片的 24px 更大 */
}

.card-highlight .card-title {
  font-size: 16px;
}

.card-highlight .card-footer {
  font-size: 14px;
}

/* 卡片基础样式 */
.card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* 装饰条颜色映射 */
.card--primary .card-decoration {
  background: linear-gradient(90deg, #1976d2, #42a5f5);
}
.card--success .card-decoration {
  background: linear-gradient(90deg, #2e7d32, #4caf50);
}
.card--warning .card-decoration {
  background: linear-gradient(90deg, #ed6c02, #ff9800);
}
.card--danger .card-decoration {
  background: linear-gradient(90deg, #c62828, #f44336);
}
.card--info .card-decoration {
  background: linear-gradient(90deg, #0277bd, #2196f3);
}

.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  border-radius: 12px 0 0 12px;
}

/* 内容区 */
.card-body {
  flex: 1;
  z-index: 1;
}

.card-title {
  font-size: 15px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.card-footer {
  font-size: 13px;
}

.change {
  font-weight: 500;
  margin-right: 6px;
}

.unit {
  color: #999;
}

/* 图标区 */
.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  margin-left: 10px;
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover .card-icon {
  transform: scale(1.1);
  opacity: 1;
}

/* 图标颜色根据类型 */
.card--primary .card-icon {
  background: #1976d2;
}
.card--success .card-icon {
  background: #4caf50;
}
.card--warning .card-icon {
  background: #ff9800;
}
.card--danger .card-icon {
  background: #f44336;
}
.card--info .card-icon {
  background: #2196f3;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  .title {
    font-size: 24px;
  }
}
</style>
